<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <meta name="referrer" content="no-referrer" />
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <style>
      .box {
        border: 1px solid, black;
        border-collapse: collapse;
        border-spacing: 0;
      }
      th,
      td {
        padding: 8px 15px;
        border: 1px solid rgb(223, 223, 223);
      }
      th {
        color: rgb(100, 101, 110);
        background-color: rgb(248, 247, 248);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <table class="box">
        <tr>
          <th>
            全选<input
              type="checkbox"
              v-model="allCheck"
              @change="changeAllChecked"
            />
          </th>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>删除</th>
        </tr>
        <tr v-for="book in books" :key="book.id">
          <td>
            <input
              type="checkbox"
              :checked="book.isSelected"
              @change="changeFlag(book.id)"
            />
          </td>
          <td>
            <img
              :src="book.productCover"
              style="width: 50px; height: 80px"
            />{{book.productName}}
          </td>
          <td>{{'￥' + book.productPrice}}</td>
          <td>
            <button
              @click="book.productCount>0 ? book.productCount-- : book.productCount"
            >
              -</button
            >&nbsp; <span>{{ book.productCount }}</span>&nbsp;
            <button @click="book.productCount++">+</button>
          </td>
          <td>{{'￥' + miniSum(book.id)}}</td>
          <td>
            <button
              @click="del(book.id)"
              style="
                width: 50px;
                height: 25px;
                background-color: red;
                color: white;
                border: 0;
                border-radius: 5px;
              "
            >
              删除
            </button>
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <span v-if="books.length ? false : true"
              >购物车中没有商品！！！</span
            >
            <span v-else style="padding-left: 380px"
              >总价格:{{'￥' + sumPrice}}</span
            >
          </td>
        </tr>
      </table>
    </div>

    <script>
      const { createApp, ref, computed, onMounted } = Vue
      createApp({
        setup() {
          //定义数据
          const books = ref([])
          onMounted(() => {
            getData()
          })
          //全选/全不选状态
          let allCheck = ref()

          //全选全不选功能
          function changeAllChecked() {
            // console.log(allCheck.value)
            if (allCheck.value) {
              books.value.forEach((item) => {
                item.isSelected = true
              })
            } else {
              books.value.forEach((item) => {
                item.isSelected = false
              })
            }
          }

          //切换单个数据状态
          function changeFlag(id) {
            let sum = 0
            books.value.forEach((item) => {
              if (item.id === id) {
                item.isSelected = !item.isSelected
              }
              if (item.isSelected == true) {
                sum++
              }
            })
            if (sum == books.value.length) {
              allCheck.value = true
            } else {
              allCheck.value = false
            }
          }

          //获取数据
          function getData() {
            axios.get("http://122.112.161.135:8000/cart").then((res) => {
              // console.log(res.data)
              books.value = res.data
              let sum = 0
              books.value.forEach((item) => {
                if (item.isSelected == true) {
                  sum++
                }
              })
              if (sum == books.value.length) {
                allCheck.value = true
              } else {
                allCheck.value = false
              }
            })
          }

          //小计
          function miniSum(id) {
            let sum = 0
            books.value.forEach((item) => {
              if (item.id == id) {
                sum += item.productPrice * item.productCount
              }
            })
            return sum.toFixed(2)
          }

          //定义计算属性，计算总价
          let sumPrice = computed(() => {
            let sum = 0
            books.value.forEach((item) => {
              if (item.isSelected) {
                sum += item.productPrice * item.productCount
              }
            })
            return sum.toFixed(2)
          })

          //定义方法，删除书籍
          function del(id) {
            books.value.forEach((item, index) => {
              if (item.id == id) {
                books.value.splice(index, 1)
              }
            })
          }

          //返回数据、方法...
          return {
            books,
            sumPrice,
            miniSum,
            del,
            allCheck,
            changeAllChecked,
            changeFlag,
          }
        },
      }).mount("#app")
    </script>
  </body>
</html>
